<template>
  <div class="sll">
    <!-- 修改组件2,如果一个模块需要两个修改弹窗的话可以引用此组件 -->
    <el-button style="display:inline-block;" type="text" size="mini" @click="DialogVisibleMod = true">编辑</el-button>
    <div>
      <el-dialog title="编辑" :modal="false" :visible.sync="DialogVisibleMod" width="900px" :before-close="handleClose" :show-close="false" :modal-append-to-body="false" style="text-align: left;z-index:3000;">
        <div class="list" v-for="(item,index) in attributeOrderClone" :key="index" v-if="item.modificationSign">
          <span class="fon">
            <span v-if="!item['skipSign']" style="color:red;">*</span>
            {{item.CN}}:
          </span>
          <span class="inb" v-if="item.type==='input'">
            <!-- {{fromModData[item.EN]}} -->
            <el-input :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请输入内容" @blur="BurExp($event,item,index)" clearable size="mini"></el-input>
          </span>
          <span v-if="!item.result" class="font_color">{{item.err}}</span>
          <span class="inb" v-if="item.type=='date'">
            <!-- <h1>{{modData.createTime}}</h1> -->
            <el-date-picker :disabled="item.examineDisabled" v-model="fromModData[item.EN]" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime" style="width:93%" size="mini"></el-date-picker>
          </span>

          <span v-if="item.type=='select'">
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini">
              <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="modifyData(true,modData)" size="mini">确定</el-button>
          <el-button @click="modifyData(false,modData)" size="mini">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: ['modData', 'attributeOrder'],
  data() {
    return {
      DialogVisibleMod: false,
      //深克隆
      attributeOrderClone: undefined,
      //表单里面的值
      fromModData: undefined,
    }
  },
  computed: {
    TableDataModel() {
      let new_DataModel = JSON.parse(JSON.stringify(this.attributeOrder))
      for (let i = 0; i < new_DataModel.length; i++) {
        if (!new_DataModel[i].modificationSign) {
          console.log('-------------计算属性-----------')
          new_DataModel.splice(i, 1)
        }
      }
      console.log(new_DataModel)
      return new_DataModel
    },
  },
  mounted() {
    ;[this.attributeOrderClone, this.fromModData] = JSON.parse(
      JSON.stringify([this.attributeOrder, this.modData])
    )
    // console.log('*****************')
    // console.log(this.attributeOrderClone)
    // console.log(this.fromModData)
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.modifyData(false, this.modData)
          done()
        })
        .catch((_) => {})
    },
    //转化时间格式
    getSTime(val) {
      this.modData.createTime = val
    },
    //确定修改-取消修改
    modifyData(value, modData) {
      //value=true  确定修改
      //value=false  取消修改
      // console.log(value,modData)
      let bur = true
      if (value === false) {
        this.$emit('modifyData_child', false, this.fromModData)
        this.DialogVisibleMod = false
        /*  this.$message({
          message: "已取消修改",
          type: "success"
        }); */
      } else {
        for (let i = 0; i < this.attributeOrderClone.length; i++) {
          if (this.attributeOrderClone[i].result === false) {
            bur = false
          }
        }

        if (bur === true && value === true) {
          this.$emit('modifyData_child', value, this.fromModData)
          this.DialogVisibleMod = false
          // this.$message({
          //   message: "修改成功",
          //   type: "success"
          // });
        } else if (bur === false && value === true) {
          this.$message({
            message: '请输入合法内容！',
            type: 'warning',
          })
        }
      }
    },

    //正则表达式
    BurExp(e, item, index) {
      if (this.attributeOrderClone[index].attributeOrderClone) {
        item.result = true
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value)
        item.result = boolean
      }
    },
  },
}
</script>
<style scoped src="src/styles/allCss.css"></style>
<style lang="scss" scoped>
.sll {
  display: inline-block;
  margin: 0px 10px;
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    height: 44px;
    width: 300px;
    // margin: 0;
    // padding: 0;
    .font_color {
      font-size: 12px;
      padding-left: 55px;
      padding-top: 10px;
    }
  }
}
</style>


